<template>
  <div class="swiper-box" v-if="bannerList.length > 0">
    <div class="tdesign-demo-block--swiper">
      <!-- <img :src="currentImage" :key="currentImage" class="image"> -->
      <!-- <div class="demo-item" @click="pathHref(bannerList[current].url)" >
          <img  
          v-show="getShow(current)"   
            :src="urls+bannerList[current].converUrl + webUrl"   
            class="image-boxs image-boxs-move t-image t-image--fit-cover t-image--position-center" 
              
          /> 
            
        </div>   -->
      <!-- <transition name="fade"> 
      <div>
        <div class="demo-item" v-for="(item, index) in bannerList" :key="index" @click="pathHref(item.url)">
        <img
          v-show="getShow(index)"
          :src="urls + item.converUrl + webUrl"
          class="image-boxs image-boxs-move t-image t-image--fit-cover t-image--position-center"
          :class="{ 'image-boxs-move1': index == current + 1, 'move-No': moveNoActive ,'z-image-boxs':current===index}"
        />
      </div>
      </div>
      </transition> -->
      <t-swiper
        v-model:current="current"
        :autoplay="true" 
        :duration="1000" 
        :interval="4000"
        class="tdesign-demo-block--swiper"
        animation="fade"
      >
        <t-swiper-item v-for="(item, index) in bannerList" :key="index" @click="pathHref(item.url)">
          <div class="demo-item">
            <img
              :src="urls + item.converUrl + webUrl"
              class="image-boxs image-boxs-move t-image t-image--fit-cover t-image--position-center"
              :class="{ 'z-image-boxs': current === index }"
            />
          </div> 
        </t-swiper-item>
      </t-swiper>
    </div> 

    <div class="arrow-left hw-click-cursor" @click.stop="addCruuent(1)">
      <i class="doorIcon"> &#xe638; </i>
      
    </div>
    <div class="arrow-right hw-click-cursor" @click.stop="addCruuent(2)">
      <i class="doorIcon"> &#xe638; </i>
      
    </div>
    <div class="dot-box">
      <div
        :class="{ 'dot-active': current == index }"
        @click="current = index"
        :style="{
          width: 100 / bannerList.length + '%',
          height: '4px',
        }"
        v-for="(item, index) in bannerList"
        :key="index"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { ref, onMounted, onUnmounted, nextTick, onActivated, onDeactivated } from 'vue';
const webUrl: string = '?imageView2/1/format/webp';
const current = ref(0);
const timer = ref(null);
const moveNoActive = ref(false);
const props = defineProps({
  bannerList: {
    type: Array,
  },
});
const change = (currents: number, context: any) => { 
  current.value = currents;
};  
setTimeout(() => {   
  current.value = 1;
}, 2000); 

//   timer.value = setInterval(() => {
//     if (props.bannerList.length - 1 === current.value) {
//       current.value = 0;
//     } else {
//       current.value = current.value + 1;
//     }
//   }, 6000);
// onMounted(() => {
//   timer.value = setInterval(() => {
//     if (props.bannerList.length - 1 === current.value) {
//       current.value = 0;
//     } else {
//       current.value = current.value + 1;
//     }
//   }, 6000);
// });


// onUnmounted(() => {
//   current.value = 0;
//   clearInterval(timer.value);
//   timer.value = setInterval(() => {
//     if (props.bannerList.length - 1 === current.value) {
//       current.value = 0;
//     } else {
//       current.value = current.value + 1;
//     }
//   }, 6000);
// });
// onActivated(() => {
//   clearInterval(timer.value);
// });
// onDeactivated(() => {
//   clearInterval(timer.value);
// });
const addCruuent = (e: number) => {
  // clearInterval(timer.value);
  // moveNoActive.value = true;
  if (e === 2) {
    if (current.value == props.bannerList.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = props.bannerList.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
  // timer.value = setInterval(() => {
  //   if (props.bannerList.length - 1 === current.value) {
  //     current.value = 0;
  //   } else {
  //     current.value = current.value + 1;
  //   }
  // }, 6000);
  // nextTick(() => {
  //   moveNoActive.value = false;
  // });
};
const pathHref = (e?: string) => {
  if (e) {
    window.open(e);
  }
};
const getShow = (index) => {
  if (index === current.value) {
    return true;
  }
  if (index === current.value + 1) {
    return true;
  }
  if (current.value == props.bannerList.length - 1 && index === 0) {
    return true;
  }
  return false;
};
</script>

<style lang="less" scoped>
.swiper-box {
  position: relative;
  width: 100%;
  height: 100vh;
  // height: 500px;
}
.tdesign-demo-block--swiper {
  width: 100%;
  height: 100vh;
}
.demo-item {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  .image-boxs {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100vh;
  } 
  .z-image-boxs {
    transition: all 10s;
    transform: scale(1.1); 
    z-index: 99;
  }
  .image-boxs-move {
    transform-origin: center center;
    animation: move 6s infinite;
    z-index: 99;
  }
  .image-boxs-move1 {
    z-index: 50;
    animation: moves 6s infinite;
  }
}

@keyframes move {
  // 0% {
  //   transform: scale(1);
  // }
  // 40% {
  // }
  // 50% {
  // }
  // 60% {
  // }

  // 80% {
  // }
  // 90% {
  //   opacity: 1;
  // }
  // 99% {
  //   transform: scale(1.06);
  //   opacity: 0.9;
  // }
  // 100% {
  //   transform: scale(1);
  // }
}
@keyframes moves {
  // 0% {
  //   opacity: 0.3;
  // }
  // 40% {
  //   opacity: 0.3;
  // }
  // 50% {
  //   opacity: 1;
  // }
  // 95% {
  //   opacity: 1;
  // }
  // 98% {
  //   transform: scale(1);
  //   opacity: 1;
  // }
  // 100% {
  //   transform: scale(1);

  //   opacity: 1;
  // }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0.05;
}
.arrow-left {
  position: absolute;
  top: calc(50vh - 20px);
  left: 50px;
  z-index: 120;
  opacity: 0.4;
  width: 40px;
  height: 40px;
  transition: all 0.3s;

  border-radius: 50%;
  .doorIcon {
    transition: all 0.3s;
    font-size: 40px;
    line-height: 40px;
    color: #fff;
  }
}
.arrow-right {
  position: absolute;
  top: calc(50vh - 20px);
  right: 50px;
  z-index: 120;
  transition: all 0.3s;
  width: 40px;
  height: 40px;
  opacity: 0.4;
  border-radius: 50%;
  transform: rotate(180deg);
  .doorIcon {
    transition: all 0.3s;
    font-size: 40px;
    line-height: 40px;
    color: #fff;
  }
}
.arrow-left:hover,
.arrow-right:hover {
  top: calc(50vh - 35px) !important;
  width: 70px;
  height: 70px;
  opacity: 1;
  .doorIcon {
    font-size: 70px;
    line-height: 70px;
    text-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }
}

.chevron-box {
  font-size: 40px;
  color: #fff;
  opacity: 0.2;
}
.chevron-box:hover {
  opacity: 1;
}
.dot-box {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 999;
  // z-index: 99;
}
.dot-active {
  height: 4px;
  background: #fff;
  border-radius: 2px;
  opacity: 0.5;
}
.move-No {
  animation: none;
}
:deep(.t-swiper__arrow-right) {
  display: none;
}
:deep(.t-swiper__arrow-left) {
  display: none;
}
:deep(.t-swiper__navigation) {
  display: none;
}
.tdesign-demo-block--swiper {
  height: 100vh;
}
</style>